<template>
    <div>
        <div class="top">
            <div class="top-title">
                <div class="blocks"></div>
                <span>领用单据列表</span>
                <div class="budget">
                    <span>预算金额：￥</span>
                    <span>19101.00</span>
                </div>
                <div class="implement">
                    <span>执行金额：￥</span>
                    <span>19101.00</span>
                </div>
            </div>
            <div class="top-xhx"></div>
            <div class="top-srk">
                <div>
                    <el-input v-model="inputValue" size="small" suffix-icon="el-icon-search"
                        placeholder="请输入内容"></el-input>
                </div>
                <span>资产类型</span>
                <el-select v-model="value" size="small" placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <span>单据状态</span>
                <el-select v-model="value" size="small" placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <span>办理状态</span>
                <el-select v-model="value" size="small" placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <span style="color: #165DFF;margin-left: 10px;cursor: pointer;">
                    高级搜索&nbsp;
                    <i class="el-icon-arrow-down" style="color: #165DFF;cursor: pointer;"></i>
                </span>
                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
            </div>
            <div class="top-an">
                <el-button type="primary">新增</el-button>
                <el-button>提交</el-button>
                <el-button>反审核</el-button>
                <el-button>完成</el-button>
                <el-button>关闭</el-button>
                <el-button>删除</el-button>
                <el-button>作废</el-button>
                <el-button>导出</el-button>
            </div>
        </div>
        <div class="bottom">
            <el-table :data="tableData" border style="width: 100%;">
                <el-table-column type="expand" label="" width="30" show-overflow-tooltip>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column type="selection" width="40" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="date" label="资产卡片编号" width="150" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="date" label="资产类别" width="150" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="date" label="资产名称" width="150" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="name" label="规格" width="120" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="province" label="单位" width="120" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="city" label="资产数量" width="120" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="address" label="领用数量" width="300" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="zip" label="领用日期" width="120" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="zip" label="备注" width="120" align="center" show-overflow-tooltip>
                        </el-table-column>

                        <el-table-column fixed="right" label="操作" width="100" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">立即验收</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-table-column>
                <el-table-column type="selection" width="40" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="date" label="领用单据编号" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="date" label="单据状态" width="80" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="name" label="资产组织" width="180" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="province" label="资产部门" width="180" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="city" label="使用部门" width="60" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="address" label="使用人" width="90" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="address" label="资产类型" width="90" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="办理状态" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="领用总数量" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="申请日期" align="center" show-overflow-tooltip>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">联查</el-button>
                        <el-button type="text" size="small">查看流程</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="4"
              background
              style="float: right;margin-top: 10px;"
              layout="total, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    methods: {
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },

    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333,

            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }],
            inputValue: '',
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            currentPage: 4
        }
    }
}
</script>
<style lang="scss" scoped>
.top {
    width: 100%;
    height: 160px;

    .top-title {
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: 20px 1290px 170px 170px;
        align-items: center;

        .blocks {
            background-color: #165dff;
            height: 14px;
            width: 4px;
            border-radius: 0px 3px 3px 0px;
        }

        span {
            color: #181818;
            font-size: 14px;
            font-weight: bold;
        }

        .budget {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }

        .implement {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }
    }

    .top-xhx {
        width: 100%;
        height: 1px;
        background-color: #169bd5;
    }

    .top-srk {
        width: 100%;
        height: 60px;
        display: grid;
        grid-template-columns: 320px 70px 280px 70px 280px 70px 280px 100px 100px 100px;
        align-items: center;

        span {
            font-size: 13px;
        }
    }

    .top-an {
        width: 100%;
        height: 60px;
        display: grid;
        grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
        align-items: center;
    }
}

.bottom {
    width: 100%;
    height: 640px;
    overflow-y: scroll;
}

.el-input {
    width: 250px;
}
</style>
